
<template>
  <a-modal
    :title="'工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="background">
      <a-card style="margin-bottom: 10px">
        <a-row>
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="工艺部位">
                <a-select
                  style="width: 180px"
                  show-search
                  placeholder="请选择工艺部位"
                  v-model="partName"
                  @change="changePart"
                  allow-clear
                >
                  <a-select-option
                    :value="item.name"
                    v-for="(item,index) in partList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="工艺做法">
                <a-select
                  style="width: 180px"
                  show-search
                  placeholder="请选择工艺做法"
                  v-model="operName"
                  @change="changeOper"
                  allow-clear
                >
                  <a-select-option
                    :value="item.name"
                    v-for="(item,index) in operList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>

      </a-card>
      <a-card>
        <div
          v-for="item,i in newList"
          :key="i"
        >
          <h3 :style="{ marginBottom: '16px' }">
            {{item.name}}
          </h3>
          <a-list
            :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 6 }"
            :data-source="item.list"
          >
            <a-list-item
              slot="renderItem"
              slot-scope="subitem, index"
            >
              <a-card
               id="partClass"
                @click="addColor(subitem)"
                style="cursor:pointer;"
                :class="{active: codeList.includes(subitem.code)}"
              >
                <div style="display:flex;flex-direction:column;">
                  <img
                    :src="subitem.imgurl"
                    style="width: 100%;height: 100px;object-fit: contain;"
                  >
                  <span style="margin-top:10px;text-align:center;font-size: 12px;">{{subitem.operName}}</span>
                  <span style="margin-top:10px;text-align:center;font-size: 12px;">{{subitem.description}}</span>
                </div>
              </a-card>
            </a-list-item>
          </a-list>
         
        </div>
      </a-card>
      <div
              v-if="showLoadingMore"
              slot="loadMore"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-spin v-if="loadingMore" />
              <a-button
                v-else
                @click="onLoadMore"
              > loading more </a-button>
            </div>
      <div class="info-action">
        <a-button
          type="primary"
          style="margin-left: 8px"
          @click="submit"
        >
          提交
        </a-button>
      </div>
    </div>
    <a-modal
      v-model="showBigImg"
      title="图片预览"
      @ok="showBigImg = false"
      :footer="null"
      width="60%"
      :mask="true"
    >
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>
    </a-modal>
  </a-modal>

</template>

<script>
import { getList, getDictChildList, savePart } from '@api/rd/index'

export default {
  components: {},
  props: {
    billList: {
      type: Object,
      default: null
    },
    billId: {
      type: Number,
      default: null
    },
    maxSeq: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      showAdd: false,
      showDetail: false,
      form: this.$form.createForm(this),
      loading: false,
      type: '',
      dataSource: [],
      newList: [],
      partList: [],
      backList: [],
      parentSelectedRowKeys: [],
      operList: [],
      prevImageUrl: '',
      showBigImg: false,
      xlList: [],
      brandList: [],
      codeList: [],
      dict: {},
      partName: undefined,
      partId: undefined,
      operName: undefined,
      operId: undefined,
      showLoadingMore:true,
      loadingMore:false,
      brand: '',
      current:1,
      xl: ''
    }
  },
  mounted() {
    this.getPartList()
    this.getOperList()
    this.loadData()
  },
    computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    reset() {
      this.$emit('closeNewPart')
    },
    onLoadMore(){
      this.current += 1
      this.loadingMore = true
      this.loadData()
    },
    async submit() {
        const backList = []
         this.dataSource.map((x)=>{
             this.codeList.map((y)=>{
                if(x.code == y){
                    backList.push(x)
                }
             })
         })

      const { realname } = this.userInfo
      const paramsArr = backList
      paramsArr.map((item, i) => {
        item.billId = this.billId
        item.operator = realname
        item.seq = this.maxSeq ? i + this.maxSeq + 1 : i
        item.subSeq = 0
      })
      try {
        const res = await savePart('bill', paramsArr)
        if (res.code == 200) {
          this.$message.success('添加部位信息成功！')
          this.reset()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      } 
    },
    addColor(values) {
      if (this.codeList.includes(values.code)) {
        this.codeList = this.codeList.filter(item => item != values.code)
      } else {
        this.codeList.push(values.code)
      }
    },
    async getPartList() {
      const params = {
        name: 'GY_PART'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.partList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    onSelect(record, selected, selectedRows, nativeEvent) {
      if (selected == true) {
        this.parentSelectedRowKeys.push(record.id)
        this.backList = selectedRows
      } else {
        this.parentSelectedRowKeys = this.parentSelectedRowKeys.filter(item => record.id != item)
        this.backList = this.backList.filter(item => record.id != item.id)
      }
    },
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    changePart(value) {
      this.partList.map(item => {
        if (item.name == value) {
          this.partId = item.code
        }
      })
    },
    changeOper(value) {
      this.operList.map(item => {
        if (item.name == value) {
          this.operId = item.code
        }
      })
    },
    async getOperList() {
      const params = {
        name: 'GY_OPER'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.operList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取做法列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取做法列表失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
          this.brandList.map(item => {
            if (this.billList.brand == item.name) {
              this.brand = item.code
            }
          })
          this.getXlList()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },

    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
          this.xlList.map(item => {
            if (this.billList.xl == item.name) {
              this.xl = item.code
            }
          })
          this.loadData()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取小类列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async loadData(key) {
      this.loading = true
      if(key){
        this.current = 1
      }
      const params = {
        current: this.current,
        size: 100,
        brand: this.billList.brandCode,
        xl: this.billList.xlCode
      }
      if (this.partName) {
        params.partId = this.partId
      }
      if (this.operName) {
        params.operId = this.operId
      }
      try {
        const res = await getList('lib', params)
        if (res.code == 200) {
          if (!res.data.records.length) {
            this.$message.error('该品牌与小类下无工艺库数据！')
          } else {
            if(this.current == 1){
              this.dataSource = res.data.records
            }else{
              this.dataSource = this.dataSource.concat(res.data.records)
            }
            if(this.dataSource.length == res.data.total){
              this.showLoadingMore = false
            }
            const newArr = []
            this.dataSource.map(x => {
              x.name = x.partName
              let index = newArr.findIndex(y => y.name == x.name)
              if (index == -1) {
                newArr.push({
                  name: x.name,
                  list: [
                    {
                      partName: x.partName,
                      operName: x.operName,
                      operId: x.operId,
                      partId: x.partId,
                      id: x.id,
                      code: x.code,
                      imgurl:x.imgurl,
                      description:x.description
                    }
                  ]
                })
              } else {
                newArr[index].list.push({
                  partName: x.partName,
                      operName: x.operName,
                      operId: x.operId,
                      partId: x.partId,
                      id: x.id,
                      code: x.code,
                      imgurl:x.imgurl,
                      description:x.description
                })
              }
            })
            this.newList = newArr
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺库列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺库列表失败！')
      } finally {
        this.loading = false
        this.loadingMore = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
@media print {
  @page {
    size: portrait;
  }
}
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.info-action {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
.active {
  border: 1px solid #40a9ff;
  background: #e6f7ff;
}
</style>
<style>
/* @media print {
  html {
    zoom: 70%;
  }
} */
#partClass .ant-card-body{
  padding: 20px 10px;
}
</style>